<!--
  Generated template for the ZuopininfoPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>作品详情</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding style="background-color: #f7f6f5">

  <ion-list>

    <p style="color: white;padding: 5px;text-align: right" (click)="dianZanEvent()"><button style="border-radius: 6px 6px 6px 6px;background-color: red;font-weight: bold">我来投票</button></p>
    <!--<img style="width: 55px;height: 22px" src="assets/icon/biaoqian.png">-->
    <!--<div style="tab-size: 19px"> <div style="float:left;width: 3px;height: 18px; background: orange;margin-right: 5px"></div>一拍 </div>-->
    <div style="tab-size: 19px;margin-bottom: 5px;"> <img src="assets/icon/zuopin1.png" style="width: 30px;height: 25px;"><label style="margin-left: 10px">一拍</label> </div>
    <label style="margin-top: 5px;margin-bottom: 5px;tab-size: 12px;color: #9d9d9d">用镜头发现世界</label>
    <!--头部banner-->
    <ion-item no-lines>

    <div class="slider-container">
      <ion-slides #slides pager="true"  pager loop="true" autoplay="3000" *ngIf="bannerlistitem['length']>0">
        <ng-container *ngFor="let info of bannerlistitem;let i=index;">
          <ion-slide >
            <div class="slide">

              <img style="width: 100%;height: 168px" src="http://www.bkqs8.com/photo/weChatApi/loadImg?path=worksdetails&filename={{info['detailImg']}}" />
              <!--<p class="slide-title">{{info['remark']}}</p>
              <p class="slide-text">{{info['imgPoint']}}</p>-->
            </div>
          </ion-slide>
        </ng-container>

      </ion-slides>
    </div>
    </ion-item>
    <div style="background-color: white;padding: 5px;border-radius: 0 0 6px 6px">
      <!--<h4 margin-top="5" style="text-align: center">{{takenAuthor}}</h4>-->
      <br>
      <p margin-top="5" style="text-align: left">作品名称：{{zuopin_title}}</p>
      <p margin-top="5" style="text-align: left">拍摄时间：{{pohtoTime}}</p>
      <p margin-top="5" style="text-align: left">拍摄地址：{{address}}</p>
      <p margin-top="5" style="text-align: left">拍摄作者：{{takenAuthor}}</p>
      <p margin-top="5" style="text-align: left">所在学校：{{authorSchool}}</p>
      <p margin-top="5" style="text-align: left">作者年龄：{{authorAge}}</p>
      <p margin-top="5" style="text-align: left">辅导老师：{{authorTeacher}}</p>
      <p margin-top="5" style="text-align: left">拍摄工具：{{takenTool}}</p>


      <br>
    </div><br>

    <!--<img style="width: 55px;height: 22px" src="assets/icon/biaoqianzuopininfob.png">-->
    <!--<div style="tab-size: 19px"> <div style="float:left;width: 3px;height: 18px; background: orange;margin-right: 5px"></div>二记 </div>-->

    <div style="tab-size: 19px;margin-bottom: 5px;"> <img src="assets/icon/zuopin2.png" style="width: 30px;"><label style="margin-left: 10px">二记</label> </div>
    <label style="margin-top: 5px;margin-bottom: 5px;tab-size: 12px;color: #9d9d9d">用科学记录影像</label>

    <div style="background-color: white;border-radius: 6px 6px 6px 6px;" >
      <br>
    <p margin-top="5" margin-left="5" style="text-align: left">{{content}}</p>
      <br>
    </div>
    <br>
    <!--<div style="tab-size: 19px"> <div style="float:left;width: 3px;height: 18px; background: orange;margin-right: 5px"></div>三问 </div>-->
    <div style="tab-size: 19px;margin-bottom: 5px;"> <img src="assets/icon/zuopin3.png" style="width: 30px;"><label style="margin-left: 10px">三问</label></div>
    <label style="margin-top: 5px;margin-bottom: 5px;tab-size: 12px;color: #9d9d9d">用提问探索未知</label>
    <div style="background-color: white;border-radius: 6px 6px 6px 6px;padding-top: 5px">
      <p margin-top="5" margin-left="5" style="text-align: left">{{answerOne}}</p>
      <p margin-top="5"  margin-left="5" style="text-align: left">{{answerTwo}}</p>
      <p margin-top="5" margin-left="5"  style="text-align: left">{{answerThree}}</p>
      <p margin-top="5" margin-left="5" style="text-align: left">{{answerFour}}</p>
      <p margin-top="5" margin-left="5" style="text-align: left">{{answerFive}}</p>
      <br>
    </div>
    <ion-col>
      <p margin-top="5" style="text-align: left;color: #ce8483">上传时间：{{createTime}}</p>
    </ion-col>
    <ion-row>
      <ion-col >
        <button ion-button color="primary" clear small icon-start>
          <img style="width: 28px;height: 28px;margin-right: 5px" src="assets/icon/dianzan.png">
          {{giveLikeNumber}}
        </button>
      </ion-col>
      <ion-col >
        <button ion-button color="primary" clear small icon-start>
          <img style="width: 28px;height: 28px;margin-right: 5px" src="assets/icon/liuyan.png">
          {{replyNumber}}
        </button>
      </ion-col>
      <ion-col align-self-center text-center>
        <ion-note>
          <!--{{forwardNumber}} 转发-->
        </ion-note>
      </ion-col>
    </ion-row>
    <div style="margin-top: 11px;tab-size: 19px;margin-bottom: 5px;"> <img src="assets/icon/zuopin4.png" style="width: 30px;"><label style="margin-left: 10px">四答</label></div>
    <!--<div style="margin-top: 11px">评论：</div>-->
    <div style="background-color: white;border-radius: 6px 6px 6px 6px;padding: 8px">
        <textarea [(ngModel)]="textarea" type="text" value="" placeholder="请输入内容" style="width: 100%;height: 77px;max-lines: 5;"></textarea>
      <button style="width: 100%;height: 38px;border-radius: 6px 6px 6px 6px" (click)="pinglunEvent()"> 提交</button>
    </div>
    <!--回复列表-->
    <div style="margin-top: 11px;margin-bottom: 11px">
    <huifulist [listitemhuifu]="tasklisthuifu" [leizhuhuifu]="leizhuhuifu"></huifulist>
    </div>


    <div>
      <img style="width: 100%" src="assets/imgs/zuopininfo_bottom.png">
    </div>


  </ion-list>




</ion-content>
